<!DOCTYPE html>
<html>
<head>
    <title>lineage diagram</title>
    <link href="datanodeEr.css" rel="stylesheet">
    <link href="jsPlumbToolkit-defaults.css" rel="stylesheet">
    <link href="jsPlumbToolkit-datanodeEr.css" rel="stylesheet">
    <link href="font.css" rel="stylesheet">
    <link href="font-awesome.css" rel="stylesheet">
    <link href="gollum-template.css" rel="stylesheet">
    <link href="gollum-template.css" rel="stylesheet">
    <link href="common.css" rel="stylesheet">
    <link href="hier.css" rel="stylesheet">
    <link href="shake.css" rel="stylesheet">
    <link href="jquery.treetable.datanode.css" rel="stylesheet">
</head>
<body>
<div id="lineageDatabaseChart"></div>
<div id="lineageChart">
    <!--<input id="tag" value="${tag!''}" class="hide">-->
    <div class="map-sidebar node-palette hide">
        <ul>
            <li jtk-node-type="table" title="Drag to add new"><i
                    class="fa fa-table btn-icon-margin"></i>Table
            </li>
            <li jtk-node-type="view" title="Drag to add new"><i class="fa fa-eye btn-icon-margin"></i>View
            </li>
        </ul>
    </div>
    <div class="lineageChartCanvas autoHeight" style="border:none">
        <div class="controls">
            <i class="fa fa-arrows selected-mode" mode="pan" title="Pan Mode"></i>
            <i class="fa fa-pencil" mode="select" title="Select Mode"></i>
            <i class="fa fa-home" reset title="Zoom To Fit"></i>
        </div>
        <!-- miniview -->
        <div class="miniview" style="position: absolute;"></div>
    </div>
</div>
<!-- AMD -->
<script src="../../assets/modules/config.js" id="console-config"></script>
<script src="../../assets/plugins/amd/require.js"></script>
</body>
<script>
    context.call({
        baseUrl: './../../'
    }, ["jQuery", "jsPlumb", "jsPlumbToolkit", "lineage"], function (jQuery, jsPlumb, jsPlumbToolkit, lineage) {

        $.ajax({
            url: "database.json",
            dataType: "json",
            success: function (d) {
                console.log(d);
                var tableLineage = lineage.createLineage(document.querySelector("#lineageChart")).layout(d)
                        .initTableLineage();
            }
        });
    });
</script>
</html>
